/**
 * 知识付费在线课程v2.0.0
 * Author: 山西匠言网络科技有限公司
 * This is not a free software, it under the license terms, you can visit https://www.zsffzxkc.cn/ get more details.
 */
<template>
	<view class="container">
		
		<!-- 头部 -->
		<view class="user-title">
			<view class="page-title">
				
			</view>
			<view class="user-title-center">
				<view class="user-photo">
				<image :src="userinfo.avatar?userinfo.avatar:'../../static/user-photo.png'" mode="aspectFit"></image>
				<view class="user-info">
					<text>{{wx_nickname?wx_nickname:userinfo.nickname}}</text>
				</view>
				</view>
				<text class="user-qiandao" @click="cutButton">切换</text>
			</view>
			
			
			<view class="user-title-bottom">
				<!-- 余额列表 -->
				<view class="user-balance">
					<view class="user-balance-item" @click="openChongzhi">
						<text>{{userinfo.money?userinfo.money:0}}</text>
						<text>余额（元）</text>
					</view>
					<view class="user-balance-item" @click="navigate('credits-exchange')">
						<text>{{userinfo.credit?userinfo.credit:0}}</text>
						<text>积分</text>
					</view>
					<view @click="navigate('learn-time')" class="user-balance-item" style="overflow: hidden;">
						<text style="font-size: 35upx;">{{todayTotal}}</text>
						<text>学习时长</text>
					</view>
					<view @click="navigate('message')" class="user-balance-item">
						<text>0</text>
						<text>消息</text>
					</view>
				</view>
			</view>
			
			
			<view class="chongzhi" v-if="isChongzhi === true">
				<view class="chongzhi-box">
					<view class="chongzhi-box-top">
						<text>当前余额：{{userinfo.money?userinfo.money:0}}</text>
						<view class="money-input">
							<text>充值金额：</text>
							<input type="digit" placeholder="请输入充值金额" @input="changeCzmoney" />
						</view>
					</view>
					<view class="chongzhi-box-bottom">
						<text @click="closeChongzhi(false)">关闭</text>
						<text @click="czbtn">充值</text>
					</view>
				</view>
			</view>
			
			
			<view class="user-icon-list">
				<view class="user-icon-list-item" @click="goSignIn">
					<image src="../../static/user-qiandao.png" mode="aspectFit"></image>
					<text>每日签到</text>
				</view>
				<view class="user-icon-list-item" @click="navigate('credits-exchange')">
					<image src="../../static/user-jifen.png" mode="aspectFit"></image>
					<text>积分商城</text>
				</view>
				<view class="user-icon-list-item" @click="navigate('wo-subscribe')">
					<image src="../../static/dingyue.png" mode="aspectFit"></image>
					<text>我的收藏</text>
				</view>
				<view class="user-icon-list-item" @click="navigate('vip')">
					<image src="../../static/user-vip.png" mode="aspectFit"></image>
					<text>升级VIP</text>
				</view>
			</view>
			
		</view>
		
		
		<view class="user-box" v-if="isCut == false">
			<view class="user-box-item" @click="navigate('wo-course')">
				<view class="user-box-item-left">
					<image src="../../static/orders1.png" mode="aspectFit"></image>
					<text>我的订单</text>
				</view>
				<image class="user-box-item-right" src="../../static/jt.png" mode="aspectFit"></image>
			</view>
			<view class="user-box-item" @click="navigate('recruit')">
				<view class="user-box-item-left">
					<image src="../../static/jszm2.png" mode="aspectFit"></image>
					<text>讲师招募</text>
				</view>
				<image class="user-box-item-right" src="../../static/jt.png" mode="aspectFit"></image>
			</view>
			
			<view class="user-box-item" @click="make_phone">
				<view class="user-box-item-left">
					<image src="../../static/telphone.png" mode="aspectFit"></image>
					<text>联系我们</text>
				</view>
				<image class="user-box-item-right" src="../../static/jt.png" mode="aspectFit"></image>
			</view>
			<!-- 退出登录按钮 -->
			<view class="logout" @click="logout">
					<text>退出登录</text>
			</view>
		</view>
		
		
		
		<view class="user-cut" v-if="isCut == true">
			<view class="user-cut-vip" @click="navigate('vip')">
				<image src="../../static/user-vip-cut.png" mode="aspectFit"></image>
			</view>
			<view class="user-cut-box1">
				<view class="user-cut-box1-top">
					<text>更多服务</text>
				</view>
				<view class="user-cut-box1-bottom">
					<view class="cut-list">
						<view class="cut-list-item" @click="navigate('wo-course')">
							<image src="../../static/orders1.png" mode="aspectFit"></image>
							<text>我的订单</text>
						</view>
						<view class="cut-list-item" @click="navigate('recruit')">
							<image src="../../static/jszm2.png" mode="aspectFit"></image>
							<text>讲师招募</text>
						</view>
						
						<view class="cut-list-item" @click="make_phone">
							<image src="../../static/telphone.png" mode="aspectFit"></image>
							<text>联系我们</text>
						</view>
						<view class="cut-list-item" @click="logout">
							<image src="../../static/zhuxiao.png" mode="aspectFit"></image>
							<text>退出登录</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		
		
		
		<!-- logo -->
		<view class="logo" @click="copyright">
			<image src="../../static/jishuzhichi.png" mode="aspectFit"></image>
		</view>
		
		
		
		<!-- 获取微信信息 -->
<!-- 		<view v-if="get_wxinfo===true" class="wxinfo_btn">
			<view class="wxinfo_btn-box">
				<text class="tsinfo">温馨提示</text>
				<text>为了更好的为您服务,我们需要获取您的微信头像、昵称用于登录,请点击授权</text>
				<button @click="getwxinfo" open-type="getUserInfo">微信授权</button>
			</view>
		</view> -->
	</view>
</template>

<script>
	import {checkUserinfo,wx_login} from '@/request/checkUserinfo'
	export default {
		data() {
			return {
				title: '个人中心',
				path:'',
				userinfo:'',
				wx_nickname:'',
				get_wxinfo:false,
				isChongzhi: false,
				czmoney:0,
				shop_phone:'',
				userList: ['我的课程', '我的订阅', '升级VIP', '成为代理商', '分销中心', '讲师招募', '联系我们', ],
				isCut: true,
				todayTotal:0,
				
			};
		},
		onShareAppMessage(res) {
			let path = getCurrentPages()
			let path_share = path[0].$page.fullPath
			let path_title = path[0].data.title
			let userinfo = uni.getStorageSync('userinfo')
			if(userinfo.uid=='' || !userinfo.uid){
				uni.navigateTo({
					url:'../login/login'
				})
			}else{
				if (res.from === 'button') {
					
				}
				return {
					title: path_title,
					path: `${path_share}?pid=${userinfo.uid}`,
					imageUrl:'../../static/banner4.png'
				}
			}
		},
		onLoad() {
			this.getsetting()
			
		},
		onShow(){
			checkUserinfo()
			this.base_check()
			this.gettodaystudytime()
		},
		methods: {
			copyright(){
				uni.navigateTo({
					url:'../copyright/copyright'
				})
			},
			gettodaystudytime(){
				const BASE_URL = uni.BASE_URL
				uni.request({
					url: BASE_URL+'index/user/my_today_studytime',
					method:'POST',
					data:{
						uid:this.userinfo.id
					},
					success:(res) =>{
						console.log(res.data);
						if(res.data.code==0){
							this.todayTotal=this.formatSecToStr((res.data.data.videostudytime)+(res.data.data.audiostudytime)+(res.data.data.tuwenstudytime))
						}
					},
					fail:(res)=> {
						console.log(res.data);
					}
				});
			},
			formatSecToStr(seconds){
			    let daySec = 24 *  60 * 60;
				let hourSec=  60 * 60;
				let minuteSec=60;
			    let dd = Math.floor(seconds / daySec);
			    let hh = Math.floor((seconds % daySec) / hourSec);
			    let mm = Math.floor((seconds % hourSec) / minuteSec);
				let ss=seconds%minuteSec;
			    if(dd > 0){
			      return dd + "天" + hh + "小时" + mm + "分钟"+ss+"秒";
			    }else if(hh > 0){
			      return hh + "小时" + mm + "分钟"+ss+"秒";
			    } else if (mm > 0){
			      return mm + "分钟"+ss+"秒";
			    }else{
			      return ss+"秒";
			    }
			},
			// 切换风格
			cutButton() {
				this.isCut = !this.isCut
			},
			make_phone(){
				uni.makePhoneCall({
					phoneNumber: '17636002018'
				});
				// if(this.shop_phone!=''){
				// 	uni.makePhoneCall({
				// 		phoneNumber: this.shop_phone
				// 	});
				// }else{
				// 	uni.showToast({
				// 		title:'暂未设置客服联系方式！',
				// 		icon:'none'
				// 	})
				// }
			},
			getsetting(){
				let base_set = uni.getStorageSync('base_set')
				this.shop_phone=base_set.phone
			},
			changeCzmoney(e){
				this.czmoney=e.detail.value
			},
			czbtn(){
				if(this.czmoney<=0){
					uni.showToast({
						title:'充值金额不能为空',
						icon:'none'
					})
					return false
				}
				uni.navigateTo({
					url:'../confirm-order-form/confirm-order-form?goodstype=chongzhi&czmoney='+this.czmoney
				})
			},
			logout(){
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗？',
					success: function (res) {
						if (res.confirm) {
							uni.removeStorageSync('userinfo')
							uni.navigateTo({
								url:'/pages/login/login'
							})
						} else if (res.cancel) {
								console.log('用户点击取消');
						}
					}
				});
			},
			base_check(){
				const userinfo_check= uni.getStorageSync('userinfo');
				if(userinfo_check.userdata){
					this.userinfo=userinfo_check.userdata
				}
				// #ifdef MP-WEIXIN
				if(userinfo_check.wxinfo){
					this.get_wxinfo=false
					this.wx_nickname=userinfo_check.wxinfo.nickName
				}else{
					this.get_wxinfo=true
				}
				// #endif
			},
			getwxinfo(){
				wx_login()
				setTimeout(()=>{
					this.base_check()					
				},1000)
			},
			goSignIn() {
				uni.navigateTo({
					url: '/pages/sign-in/sign-in'
				});
			},
			navigate(e) {
				if(e == 'vip') {
					uni.switchTab({
						url: `/pages/${e}/${e}`
					})
				}else {
					uni.navigateTo({
						url: `/pages/${e}/${e}`
					});
				}
			},
			openChongzhi() {
				this.isChongzhi = true
			},
			closeChongzhi(e) {
				if(e) {
					this.isChongzhi = false
				} else {
					this.isChongzhi = false
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	
	.asdasd {
		width: 150upx;
		height: 80upx;
		background-color: orange;
		position: fixed;
		right: 50upx;
		bottom: 200upx;
	}
	
	
	
	
	
page {
	background-color: #ebeef5;
	font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
}
.wxinfo_btn{
	background-color: rgba(9,9,9,.8);
	position: fixed;
	z-index: 999;
	top:0;
	left: 0;
	width: 100%;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	&-box{
		font-size: 26upx;
		width: 60%;
		min-height: 260upx;
		padding: 30upx;
		background-color: rgba(255,255,255,.9);
		border-radius: 20upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		.tsinfo{
			font-size: 30upx;
			font-weight: 700;
		}
		button{
			font-size: 33upx;
			background-color: #07c160;
			color: #fff;
			border: none;
			padding: 0 100rpx;
		}
	}
}


// 充值
.chongzhi {
	width: 100%;
	height: 100vh;
	position: fixed;
	z-index: 999;
	top: 0;
	left: 0;
	background: rgba(9,9,9,.3);
	&-box {
		width: 600upx;
		// height: 420upx;
		background-color: #fff;
		border-radius: 20upx;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -80%);
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		&-top {
			padding: 30upx 20upx 50upx;
			display: flex;
			flex-direction: column;
			text {
				font-size: 34upx;
				color: #333;
			}
			text:nth-child(2) {
				margin: 20upx 0;
			}
			.money-input {
				margin-top: 20upx;
				display: flex;
				align-items: center;
				input {
					height: 60upx;
					border: 2upx solid #ddd;
					border-radius: 10upx;
					padding-left: 10upx;
				}
			}
		}
		&-bottom {
			border-top: 2upx solid #ddd;
			display: flex;
			align-items: center;
			justify-content: space-between;
			text {
				width: 50%;
				height: 90upx;
				// background-color: #007AFF;
				color: #333;
				font-size: 34upx;
				font-weight: 700;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			text:last-child {
				color: #4b89ff;
			}
		}
	}
}




// 头部
.user-title {
	width: 100%;
	height: 480upx;
	padding-top: .5rem;
	background: url() no-repeat;
	background-size: 100%;
	    
	.page-title{
		text-align: center;
		font-size: 1.2rem;
		color: #fff;
	}
	&-center {
		margin-top: 30upx;
		width: 100%;
		height: 100upx;
		 display: flex;
		 align-items: center;
		justify-content: space-between;
		padding: 30upx 0;
		.user-photo {
			display: flex;
			justify-content: center;
			margin-left: 30rpx;
			image {
				width: 108upx;
				height: 108upx;
				border-radius: 54upx;
			}
		}
		.user-info {
			margin-left: 30upx;
			display: flex;
			justify-content: center;
			flex-direction: column;
			
			text:nth-child(1) {
				font-size: 32upx;
				font-weight: 700;
				color: #fff;
			}
			text:nth-child(2) {
				width: 150upx;
				height: 32upx;
				margin-top: 10upx;
				text-align: center;
				line-height: 32upx;
				border: 2upx solid #fff;
				border-radius: 30upx;
				font-size: 20upx;
				color: #fff;
			}
		}
		.user-qiandao {
			color: #fff;
			width: 150upx;
			height: 50upx;
			background-color: rgba(255,255,255,.38);
			border-radius: 60upx;
			text-align: center;
			line-height: 50upx;
			font-size: 30upx;
			font-weight: 700;
			margin-right: 50upx;
		}
	}
	&-bottom {
		padding: 20upx 0;
		.user-balance {
			padding: 0 10upx;
			display: flex;
			align-items: center;
			&-item {
				flex: 1;
				height: 80upx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				border-right: 1upx solid rgba(255,255,255,.15);
				text{
					line-height:50upx;
				}
				text:nth-child(1) {
					font-size: 42upx;
					color: #fff;
				}
				text:nth-child(2) {
					font-size: 24upx;
					color: #fff;
				}
			}
			&-item:last-child{
				border: none;
			}
		}
	}
	
	.user-icon-list {
		width: 690upx;
		height: 200upx;
		margin: 20upx 30upx 0 30upx;
		background-color: #fff;
		border-radius: 20upx;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		&-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			image {
				width: 80upx;
				height: 80upx;
			}
			text {
				font-size: 26upx;
				margin-top: 20upx;
			}
		}
	}
	
}



// 切换风格
.cut {
	margin-top: 80upx;
	button {
		background-color: #fff;
	}
}





.user-box {
	width: 100%;
	margin-top: 80upx;
	background-color: #ebeef5;
	&-item {
		height: 100upx;
		background-color: #fff;
		margin-bottom: 16upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		&-left {
			display: flex;
			align-items: center;
			image {
			width: 45upx;
			height: 45upx;
			margin: 0 30upx;
			}
			text {
				font-size: 30upx;
			}
		}
		&-right {
			width: 35upx;
			height: 35upx;
			margin-right: 30upx;
		}
	}
	
	// 退出登录
		.logout{
			height: 100upx;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			text {
				font-size: 1rem;
				color: #fba18c;
			}
		}
}

.user-cut {
	margin-top: 60upx;
	&-vip {
		text-align: center;
		image {
			width: 710upx;
			height: 150upx;
		}
	}
	&-box1 {
		margin: 20upx auto 0;
		width: 710upx;
		background-color: #fff;
		border-radius: 20upx;
		&-top {
			padding-top: 30upx;
			text {
				font-size: 28upx;
				color: #333;
				margin-left: 20upx;
			}
		}
		&-bottom {
			.cut-list {
				margin-top: 40upx;
				display: flex;
				flex-wrap: wrap;
				&-item {
					width: 25%;
					margin-bottom: 40upx;
					display: flex;
					flex-direction: column;
					align-items: center;
					image {
						width: 50upx;
						height: 50upx;
					}
					text {
						font-size: 28upx;
						color: #333;
						margin-top: 20upx;
					}
				}
			}
		}
		
	}
}




	
	
	.logo {
		margin: 10upx 0;
		display: flex;
		align-items: center;
		justify-content: center;
		image {
			width: 240upx;
			height: 100upx;
		}
	}
	
	
</style>
